<template>
  <div class="card-d">
    <div v-if="title!==''" class="header">
      <span class="text">{{ title }}</span>
    </div>
    <div class="card-body">
      <slot name="before" />
      <slot>
        <van-empty v-if="htmlText===undefined" :description="empty" />
        <div v-else-if="isHtmlSet" class="html-content">
          <div v-for="(h,i) in htmlText" :key="i" v-html="h.content" />
        </div>
        <div v-else class="html-content">
          <div v-html="htmlText" />
        </div>
      </slot>
      <slot name="after" />
    </div>
  </div>
</template>
<script>
export default {
  name: 'Card',
  props: {
    title: {
      type: String,
      default: ''
    },
    empty: {
      type: String,
      default: ''
    },
    htmlText: {
      type: [String, Array],
      default: undefined
    }
  },
  data() {
    return {
    }
  },
  computed: {
    isHtmlSet() {
      return this.htmlText instanceof Array
    }
  },
  methods: {
  }
}
</script>
<style lang="less">
.card-d{
  background-color: #fff;
  padding: 12px 15px;
  .header{
    height: 20px;
    line-height: 20px;
    display: flex;
    align-items: center;
    .text{
      font-size: 14px;
      color: rgba(51, 51, 51, 1);
      font-weight: 700;
    }
    &::before{
      content: "";
      display: block;
      height: 18px;
      width: 3px;
      background: linear-gradient(180deg, #00C8B4 0%, #57F1E1 100%);
      margin-right: 10px;
    }
  }
  .card-body{
    padding-top: 15px;
    .html-content{
      overflow: hidden;
      div{
        & *{
          max-width: calc(100vw - 30px) !important;
        }
        table{
          width: 100% !important;
        }
        p{
          img{
            width: 100% !important;
            height: auto !important;
          }
        }
      }
    }
  }
}
</style>
